<template>
	<view class="view-root" style="position: relative">
		<view style="display: flex;box-sizing: border-box;align-items: center;flex-direction: column-reverse;"
			class="top-bg">
			<image src="https://res.jiuzhang-cloud.com/jzy-oss/upload/image/dti-hospital/ic_login_logo.png"
				style="width: 180rpx;height: 152rpx;"></image>
			<view
				style="font-size: 48rpx;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 600;color: #FFFFFF;margin: 24rpx;">
				帝速互联网医院</view>
		</view>
		<view
			style="display: flex;flex-direction: column;flex: 1; box-sizing:border-box;justify-content:center;margin-left: 20rpx;">
			<view class="loginBtn" @click="loginByUserInfo">
				手机号快捷登录
			</view>
			<view style="display: flex;align-items: center;margin: 24rpx auto 0;padding-right: 20rpx;">
				<view class="checkbox_wrap" @click="goAgreement('healthInfoAuth')">
					<view class="checkbox_circle">
						<view v-if="hasRead"></view>
					</view>
				</view>
				<view style="flex: 1;">
					<text class="agree-black">我已阅读并同意</text>
					<!-- @click="ilgin_on()" -->
					<text class="agree-color">
						<text @click="goAgreement('healthInfoAuth')">《{{ protocol.healthInfoAuth.title }}》</text>
						<text @click="goAgreement('legalStatement')">《{{ protocol.legalStatement.title }}》</text>
						<text @click="goAgreement('privacyPolicy')">《{{ protocol.privacyPolicy.title }}》</text>
						<text @click="goAgreement('riskNotice')">《{{ protocol.riskNotice.title }}》</text>
						<text @click="goAgreement('user')">《{{ protocol.user.title }}》</text>
					</text>
				</view>
			</view>
		</view>
		<view v-if="showTelRequest" class="root" style="background-color: rgba(0, 0, 0, 0.5);">
			<view
				style="width: 500rpx;background-color: white;display: flex;flex-direction: column;border-radius: 12rpx;padding: 50rpx 24rpx;">
				<text class="titleText">登录授权 申请</text>
				<view style="display: flex; align-items: center;">
					<image
						style="width: 80rpx;height: 80rpx;background-color: darkgray;border-radius: 8rpx;margin: 80rpx 24rpx 80rpx 0;"
						:src="userInfo.avatarUrl"></image>
					<text class="titleText">{{ userInfo.nickName }}</text>
				</view>
				<view style="display: flex;">
					<view style="flex: 1;" class="refuseBtn" @click="cancelRequestPhone">拒绝</view>
					<button style="flex: 1;" class="agreeBtn" open-type="getPhoneNumber"
						@getphonenumber="handlePhoneNumber">同意</button>
				</view>
			</view>
		</view>
		<u-loginagreement ref="login_agr" :tatle="protocol.title" :content="protocol.content"></u-loginagreement>
	</view>
</template>

<script>
	import {
		token,
		userInfo,
		imInfo,
		currentImInfo
	} from "@/utils/token.js"
	import {
		appId,
		sdkAppId
	} from "@/config.js"

	export default {
		data() {
			return {
				hasRead: false,
				showTelRequest: false,
				openIdStore: '',
				userInfo: {},
				protocol: {}
			};
		},
		onLoad(options) {
			uni.$on('choosePath', (res) => {
				this.hasRead = true
			})
		},
		onUnload() {
			uni.$off('choosePath')
		},
		onShow() {
			this.getProtocol()
		},
		methods: {
			goAgreement(type) {
				uni.navigateTo({
					url: '/pages/agreement/agreement?type=' + type
				})
			},
			ilgin_on() {
				this.$refs.login_agr.login_on()
			},
			// 获取协议
			getProtocol() {
				this.$api.getProtocolsByType({
					type: 'user,riskNotice,healthInfoAuth,legalStatement,privacyPolicy'
				}).then(e => {
					const {
						code,
						result
					} = e
					if (code == 200) {
						this.protocol = result
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				})
			},
			handleCheck() {
				this.hasRead = !this.hasRead;
			},

			loginByUserInfo() {
				if (!this.hasRead) {
					uni.navigateTo({
						url: '/pages/agreement/agreement?type=healthInfoAuth'
					})
					// uni.showToast({
					// 	title: "请先阅读并同意协议",
					// 	icon: "none"
					// });
					return;
				}
				uni.showLoading({
					title: '登录中...',
					mask: true
				});

				let p1 = this.wxSilentLogin()
				let p2 = this.wxGetUserProfile()

				Promise.all([p1, p2]).then((res) => {
					let code = res[0]
					let iv = res[1].iv
					let encryptedData = res[1].encryptedData
					let signature = res[1].signature
					let rawData = res[1].rawData
					let wxUserInfo = res[1].userInfo
					this.userInfo = wxUserInfo
					// 请求服务器
					this.$api.wxLogin({
						data: {
							appId,
							code,
							encryptedData,
							iv,
							rawData,
							signature,
							userInfo: wxUserInfo
						},
					}).then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							uni.showToast({
								title: "登录成功",
								icon: 'none'
							})
							imInfo.set(res.result.imInfo, Date.parse(new Date()) + (86400000 * 29));
							token.set(res.result.token, Date.parse(new Date()) + (86400000 * 29));
							userInfo.set(res.result.wxUser, Date.parse(new Date()) + (86400000 * 29));
							currentImInfo.set(res.result.imInfo, Date.parse(new Date()) + (86400000 * 29));
							// this.initIm(res.result.imInfo.token, res.result.imInfo.accid)
							getApp().globalData.role = res.result.wxUser.currentRole;
							if (!getApp().globalData.txyImController) {
								this.initTxyIm(parseInt(res.result.imInfo.sdkAppId))
								// getApp().globalData.txyImController.login(currentImInfo.get().id, currentImInfo.get().userSig)
							}
							getApp().globalData.txyImController.login(res.result.imInfo.id, res.result
								.imInfo.userSig);
							uni.reLaunch({
								url: '/pages/index/index'
							})
						} else if (res.code == 405) {
							// 请求获取电话
							// 暂存openId，展示请求弹窗
							this.openIdStore = res.result.openId;
							this.showTelRequest = true;
						}

					}).catch(err => {
						uni.hideLoading();
						uni.showToast({
							title: "登录失败",
							icon: 'none'
						})
					})
				}).catch((err) => {
					uni.hideLoading();
					uni.showToast({
						title: "登录请求失败",
						icon: 'none'
					})
				})
			},

			cancelRequestPhone() {
				this.showTelRequest = false;
				uni.showToast({
					title: "放弃授权",
					icon: 'none'
				})
			},

			handlePhoneNumber(e) {
				this.showTelRequest = false;
				if (e.detail.code) {
					uni.showLoading({
						title: '登录中...',
						mask: true
					});
					this.$api.wxLogin({
						data: {
							appId,
							openId: this.openIdStore,
							phoneCode: e.detail.code
						},
					}).then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							uni.showToast({
								title: "登录成功",
								icon: 'none'
							})
							imInfo.set(res.result.imInfo, Date.parse(new Date()) + (86400000 * 29));
							token.set(res.result.token, Date.parse(new Date()) + (86400000 * 29));
							userInfo.set(res.result.wxUser, Date.parse(new Date()) + (86400000 * 29));
							currentImInfo.set(res.result.imInfo, Date.parse(new Date()) + (86400000 * 29));
							// this.initIm(res.result.imInfo.token, res.result.imInfo.accid)
							getApp().globalData.role = res.result.wxUser.currentRole;
							if (!getApp().globalData.txyImController) {
								this.initTxyIm(parseInt(res.result.imInfo.sdkAppId))
								// getApp().globalData.txyImController.login(currentImInfo.get().id, currentImInfo.get().userSig)
							}
							getApp().globalData.txyImController.login(res.result.imInfo.id, res.result
								.imInfo.userSig);
							uni.reLaunch({
								url: '/pages/index/index'
							})
						} else {
							uni.showToast({
								title: res.message,
								icon: "none"
							})
						}
					})
				}
			},

			wxGetUserProfile() {
				return new Promise((resolve, reject) => {
					wx.getUserProfile({
						lang: 'zh_CN',
						desc: '用户登录',
						success: (res) => {
							resolve(res)
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			},

			wxSilentLogin() {
				return new Promise((resolve, reject) => {
					wx.login({
						success(res) {
							resolve(res.code)
						},
						fail(err) {
							reject(err)
						}
					})
				})
			},

		}
	}
</script>

<style lang="less" scoped>
	.view-root {
		background-color: rgba(242, 246, 252, 1);
		height: 100vh;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.root {
		background-color: rgba(242, 246, 252, 1);
		top: 0;
		bottom: 0;
		position: fixed;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.top-bg {
		width: 750rpx;
		height: 320rpx;
		border-bottom-left-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
		background: linear-gradient(180deg, #6E99C7 0%, #5BC8F6 100%);
	}

	.loginBtn {
		width: 700rpx;
		height: 100rpx;
		background-color: #6E99C7;
		line-height: 100rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.refuseBtn {
		color: #07bd5e;
		border: 2rpx solid #E5E5E5;
		border-radius: 8rpx;
		font-size: 26rpx;
		margin: 0 40rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-family: PingFangSC-Regular;
		text-align: center;
	}

	.agreeBtn {
		background-color: #07bd5e;
		color: white;
		border-radius: 8rpx;
		font-size: 26rpx;
		height: 60rpx;
		margin: 0 40rpx;
		line-height: 60rpx;
		font-family: PingFangSC-Regular;
		text-align: center;
	}

	.titleText {
		color: #333333;
		font-size: 25rpx;
		font-weight: bold;
		font-family: PingFangSC-Regular;
	}

	.agree-black {
		font-size: 24rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #6B6970;
	}

	.agree-color {
		font-size: 12px;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: rgba(110, 153, 199, 1);
	}

	.checkbox_wrap {
		padding: 24rpx;

		.checkbox_circle {
			width: 32rpx;
			height: 32rpx;
			border: 2rpx solid #222222;
			border-radius: 18rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			>view {
				width: 24rpx;
				height: 24rpx;
				background: #6E99C7;
				border-radius: 12rpx;
			}
		}

	}
</style>